<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="css/sy.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/list.css">
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/jquery.datetimepicker.full.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.css"/>
    <script src="js/component.js"></script>
</head>
<body>
<div id="app">
    <!-- 头部 -->
    <head-template></head-template>
    <!-- nav -->

    <div id="app" class="main" v-cloak>
        <div class="cw1200 clearfix" style="display: flex;">
            <div class="leftside fl">
                <div class="left-bg"></div>
                <h1 class="left-title"><span>HOTSPOT <strong>MONITORING</strong></span>
                    <p>- 分类导航 -</p></h1>
                <ul class="left-nav">
                    <li class="first-nav" v-for="(theme,index) in themeList">
                        <a :class="{active:queryData.type == theme.id || theme.id == typeParent}"
                           v-on:click="themeActiveParentChange(theme.id)" href="javascript:;">{{theme.themename}}</a>
                        <dl class="left-sub" :class="{displayblock:queryData.type == theme.id || theme.id == typeParent}">
                            <dd v-for="child in theme.childList"><a :class="{active:queryData.type == child.id}"
                                                                    v-on:click="themeActiveChange(child.id)"
                                                                    href="javascript:;">-{{child.themename}}</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <div class="rightside fr" id="rightList">
                <div class="right-search">
                    <input class="secInput" type="text" maxlength="100" name="" v-model="queryData.keywords"
                           placeholder="可检索字段包括标题、正文">
                    <span class="right-tit date-title">发布时间：</span>

                    <div class="dateRange clearfix">
                        <div class="date-box">
                            <input id="datetimepicker" type="text" class="Wdate">

                        </div>

                        <label>到</label>
                        <div class="date-box">
                            <input id="datetimepicker2" type="text" class="Wdate">
                        </div>
                    </div>
                    <input class="secBtn" type="button" name="" value="检索" v-on:click="searchData()">
                </div>

                <div class="right-top clearfix">

                </div>

                <dl class="cont-list">
                    <dd class="cont-box clearfix is-error" v-for="item in dataList">
                        <div class="checkbox" name="check"><input id="check-1" type="checkbox" name="check"><label></label>
                        </div>

                        <a class="title"
                           :href="'/detail.html?id='+item.urlid+'&type='+item.type"><span>{{item.title}}</span></a>
                        <!--                    <a class="showSame clickdown" href="javascript:;">[点击展开3篇重复文章]</a>-->
                        <div class="clearfix"></div>
                        <p class="zhaiyao">
                        <div v-html="item.digest"></div>
                        </p>
                        <span class="date">发布时间：{{item.pubdate}}</span>
                        <span class="source">来源：{{item.website}}</span>
                        <div class="clearfix"></div>
                    </dd>
                </dl>
                <page-template v-bind:total-count="totalCount" v-bind:query-data="queryData" v-bind:page-count="pageCount"></page-template>
            </div>
        </div>
    </div>

    <div class="main footer">
        <p>地址：北京市西城区白广路***********</p>
        <p>电话：010-83******</p>
        <p>版权所有：**省疾病预防控制中心&emsp;&emsp;网站备案：*ICP备********号</p>
    </div>
</div>
<script type="text/javascript">

    let params = location.href.split("?");
    let keywords = null, type = null, typeParent = null;
    if (params.length > 1) {
        paramName = params[1].split("=")[0];
        paramValue = decodeURI(params[1].split("=")[1]);
        if (paramName == 'keywords') {
            keywords = paramValue;
        } else if (paramName == 'type') {
            type = paramValue;
        } else if (paramName == 'parentType') {
            type = paramValue;
            typeParent = type.split(".")[0] + ".";
        }
    }

    $(function () {
        $(".user_name").append(localStorage.getItem("username"))
    })

    let app = new Vue({
        el: "#app",
        data: {
            queryData: {
                pageNum: 1,
                pageSize: 5,
                keywords: null,
                type: type,
                startTime: null,
                endTime: null,
            },
            themeList: [],
            dataList: [],
            totalCount: 0,
            pageCount: 0,
            typeParent: typeParent,
        },
        methods: {
            initData() {
                axios.post("/data/search", this.queryData).then(function (res) {
                    let result = res.data.data;
                    if (res.data.code == 200) {
                        app.themeList = result.themeTreeList;
                        app.dataList = result.dataList;
                        app.totalCount = result.totalCount;
                        app.pageCount = Math.ceil(result.totalCount / app.queryData.pageSize);
                    }
                })
            },
            themeActiveChange(type) {
                this.queryData.type = type;
                this.searchData();
            }
            ,
            themeActiveParentChange(type) {
                this.queryData.type = type;
                this.typeParent = type;
                this.searchData();
            }
            ,
            searchData() {
                this.queryData.startTime = $("#datetimepicker").val();
                this.queryData.endTime = $("#datetimepicker2").val();
                if (this.queryData.type == null) {
                    this.initData();
                } else this.searchLeaf();
            },
            searchLeaf() {
                axios.post("/data/search/leaf", this.queryData).then(function (res) {
                    let result = res.data.data;
                    if (res.data.code == 200) {
                        app.dataList = result.dataList;
                        app.totalCount = result.totalCount;
                        app.pageCount = Math.ceil(result.totalCount / app.queryData.pageSize);
                    }
                })
            },
        },
        mounted: function () {
            this.$nextTick(() => {
                this.initData();
            });
        }
    })

    $('#datetimepicker').datetimepicker({
        lang: "ch", //语言选择中文 注：旧版本 新版方法：$.datetimepicker.setLocale('ch');
        format: "Y-m-d",      //格式化日期
        timepicker: false
    });
    $('#datetimepicker2').datetimepicker({
        lang: "ch", //语言选择中文 注：旧版本 新版方法：$.datetimepicker.setLocale('ch');
        format: "Y-m-d",      //格式化日期
        timepicker: false
    });
</script>
</body>
</html>